import dash
from dash import html
from dash import dcc
from dash.dependencies import Input,Output

import plotly.express as px

import dash_bootstrap_components as dbc

import components

fig_df = px.data.iris()

fig_part = [
    dcc.Graph(id="scatter-plot"),
    html.P("Petal Width: "),

    dcc.RangeSlider(
        id="range-slider",
        min=0, max=2.5, step=0.1,
        marks={0:'0',2.5:'2.5'},
        value=[0.5,2]
    ),
]

app = dash.Dash(__name__,external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([
        dbc.Alert("It works!"),
        html.H1("Title"),

        html.Br(),

        dcc.Dropdown(),

        html.Br(),

        components.test_tab,
        
        *fig_part,
    ])

@app.callback(
    Output("scatter-plot", "figure"), 
    [Input("range-slider", "value")])
def update_bar_chart(slider_range):
    low, high = slider_range
    mask = (fig_df['petal_width'] > low) & (fig_df['petal_width'] < high)
    fig = px.scatter(
        fig_df[mask], x="sepal_width", y="sepal_length", 
        color="species", size='petal_length', 
        hover_data=['petal_width'])
    return fig


if __name__ == "__main__":
    app.run_server(debug=True)